<template>
  <div class="bigbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="orgNo" 
                      @updateModelValue="changeqiye"
                      :optionlist="qiyelist"
                      :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top: 4px;display: flex;">
                <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
                  <el-radio-button label="日"></el-radio-button>
                  <el-radio-button label="月"></el-radio-button>
                  <el-radio-button label="年"></el-radio-button>
                </el-radio-group>
                <template v-if="radio3=='日'">
                <el-date-picker
                size="small"
                  v-model="value1"
                  style="flex: 1;"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日">
                </el-date-picker>
              </template>
              <template v-else-if="radio3=='月'">
                <el-date-picker
                size="small"
                  v-model="value2"
                  value-format="yyyy-MM"
                  style="flex: 1;"
                  type="month"
                  placeholder="选择月">
                </el-date-picker>
              </template>
              <template v-else>
                <el-date-picker
                size="small"
                  v-model="value3"
                  value-format="yyyy"
                  style="flex: 1;"
                  type="year"
                  placeholder="选择年">
                </el-date-picker>
              </template>
              </el-col>
              <el-col :span="13" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="submit">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <!-- 封装引入导出刷新功能 -->
      <div style="display: flex;justify-content: space-between;">
        <div>变压器分析</div>
        <div class="titlebox">
          <TopTitle @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTitle>
        </div>
      </div>
      <!-- 封装表格 -->
      <div class="table">
        <TableColumn ref="TableColumn" :tableConfig="tableConfig"
           :tableData="tableData" :issize="iissize" >
           <el-table-column
                    prop="address"
                    label="操作"
                    align="center"
                    width="120">
                    <template #default="{row}">
                       <span style="color: #1a90fe;cursor: pointer;"  @click="chankan(row)">变压器监测</span>
                    </template>
                </el-table-column>
          </TableColumn>
      </div>
      <!-- 变压器检测dialog弹窗 -->
      <div class="dialog">
        <el-dialog
            title="变压器分析"
            :visible.sync="dialogVisible"
            width="65%">
            <div class="bianyaqi">
              <!-- 左边盒子 -->
             <div class="liftbox">
              <div class="top">
                <div class="image">
                  <img src="../../../assets/bianyaqi/image/bianyaqitwo.png" alt="">
                  <div class="name">{{ entity.deviceName }}</div>
                </div>
                <div class="text">
                  <div>型号</div>
                  <div class="xing">{{ entity.xh }}</div>
                  <div>厂家</div>
                  <div class="xing">{{ entity.sccj }}</div>
                </div>
              </div>
              <div class="buttom">
                <div class="xinxi bluecolor" >报警信息</div>
                <div class="disdlay">
                <div v-for="(item,index) in gaojinglist" 
                :key="index" class="baojin">
                  <div class="xinlittle">
                    <div>报警类型</div>
                    <div>{{ item.eventTypeName }}</div>
                  </div>
                  <div class="xinlittle">
                    <div>报警值</div>
                    <div>{{ item.alarmValue }}</div>
                  </div>
                  <div class="xinlittles">
                    <div>报警时间</div>
                    <div>{{ item.alarmTime }}</div>
                  </div>
                </div>
              </div>
              </div>
             </div>
             <!-- 右边盒子 -->
             <div class="rightbox">
              <div class="fourb">
                <div class="little">
                  <div><img src="../../../assets/bianyaqi/image/zhuangjrl.png" alt=""></div>
                  <div class="text">
                    <div ><span class="bluecolor">{{ entity.capacity }}</span> kVA</div>
                    <div>容量</div>
                  </div>
                </div>
                <div class="little">
                  <div><img style="width: 55px;
                  height: 55px;" src="../../../assets/bianyaqi/image/gonglv.png" alt=""></div>
                  <div class="text">
                    <div ><span class="bluecolor">{{ entity.load }}</span> kW</div>
                    <div>实时功率</div>
                  </div>
                </div>
                <div class="little">
                  <div><img src="../../../assets/bianyaqi/image/fuzailv.png" alt=""></div>
                  <div class="text">
                    <div ><span class="bluecolor">{{ entity.loadRate }}</span> %</div>
                    <div>负载率</div>
                  </div>
                </div>
                <div class="little">
                  <div><img style="width: 55px;
                  height: 55px;" src="../../../assets/bianyaqi/image/gonglys.png" alt=""></div>
                  <div class="text">
                    <div class="bluecolor">{{ entity.pft?entity.pft:'-' }} </div>
                    <div>功率因数</div>
                  </div>
                </div>
              </div>
              <!-- 温度 -->
              <div class="threeb">
                <span class="wendu">C相温度  <span class="bluecolor">{{ entity.tempA?entity.tempA:'-' }}</span> °C</span>
                <span class="wendu">B相温度  <span class="bluecolor">{{ entity.tempB?entity.tempB:'-' }}</span> °C</span>
                <span class="wendu">A相温度  <span class="bluecolor">{{ entity.tempC?entity.tempC:'-' }}</span> °C</span>
                <div class="marker" id="marker1"></div>
                <div class="marker" id="marker2"></div>
                <div class="marker" id="marker3"></div>
                <div class="oneb">
                  <img src="../../../assets//bianyaqi//image/transformer.png" alt="">
                </div>
              </div>
              <!-- 图片 -->

             </div>
            </div>
            <span slot="footer" >
              <el-button @click="dialogVisible = false" size="small">关闭</el-button>
            </span>
          </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { saveAs } from 'file-saver'
import { getuserlistapi ,getbainyaqiapi,exportbianyaqiapi,getshujuapi,getgaojingapi} from '@/api/analysis'
import TopTitle from '../../../components/TopTitle/index'
import TableColumn from '../../../components/Table/index'
export default {
  name: 'CallPoliceIndex',
  components:{TopTitle,TableColumn},
  data() {
    return {
      entity:{},
      iissize:'medium',
      radio3:'日',
      orgNo: '',
      value1: '',
      value2: '',
      value3:'',
      qiyelist: [],
      tableData: [],
      switchroomId: '',
      dialogVisible:false,
      tableConfig: [
      { label: '用电企业', prop: 'companyName' ,width:'230'},
        { label: '变压器', prop: 'deviceName',center:'center'},
        { label: '容量(kVA)', prop: 'capacity' ,center:'right'},
        { label: '平均负荷(kW)', prop: 'avgLoad' ,center:'right'},
        { label: '平均负载率(%)', prop: 'avgLoadRate',center:'right'},
        { label: '最大负载率(%)', prop: 'maxLoadRate' ,center:'right'},
        { label: '最大负载率发生时间', prop: 'maxTime' ,center:'center',width:'180'},
        { label: '最小负载率(%)', prop: 'minLoadRate' ,center:'right'},
        { label: '最小负载率发生时间', prop: 'minTime',center:'center',width:'180'},
      ],
      gaojinglist: []
    };
  },

  async mounted() {
    const res = await getuserlistapi()
    this.qiyelist = res.data.list
    // this.qiyelist.unshift({bizOrgName:'全部',bizOrgNo:''})
    this.orgNo = this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : this.qiyelist[0].bizOrgNo
    // this.orgNo = '88018932'
    // this.orgNo = '88018932'
    this.gettime() 
    this.gettablelistapi()
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      this.$store.commit('setuserobject', val)
    },
    // 获取表格数据
    async gettablelistapi() { 
      const res = await getbainyaqiapi({
        orgNo: this.orgNo,
        switchroomId: this.switchroomId,
        dateStr: this.radio3 == '日' ? this.value1 : this.radio3 == '月' ? this.value2 : this.value3,
        periodType:this.radio3 == '日' ? 'day' : this.radio3 == '月' ? 'month' : 'year'
      })
     this.tableData=res.data.list
    },
    // 重置
    async chongzhi() { 
      this.radio3 = '日'
      const res = await getuserlistapi()
    this.qiyelist = res.data.list
    // this.qiyelist.unshift({bizOrgName:'全部',bizOrgNo:''})
    this.orgNo = this.qiyelist[0].bizOrgNo
    // this.orgNo = '88018932'
    this.gettime() 
      this.gettablelistapi()
    },
    // 查询
    async submit() {
    this.gettablelistapi()
    },
    // 变压器监测
    async chankan(row) {
      this.dialogVisible=true
      const {data:{entity}} = await getshujuapi({
        transformerId:row.deviceId
      })
      const ress = await getgaojingapi({
        orgNo: this.orgNo,
        transformerId:row.deviceId
      })
      this.gaojinglist=ress.data.list
      this.entity=entity
    },
   // 获取当前时间戳
   gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.value1 = year + '-' + month + '-' + day
      this.value2 = year + '-' + month
     this.value3 = year.toString()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    // 导出
    async daochu() {
      const res = await exportbianyaqiapi({
        orgNo: this.orgNo,
        switchroomId: this.switchroomId,
        dateStr: this.radio3 == '日' ? this.value1 : this.radio3 == '月' ? this.value2 : this.value3,
        periodType: this.radio3 == '日' ? 'day' : this.radio3 == '月' ? 'month' : 'year',
        isParams: true
      })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '变压器负载率分析.xls')
    },
    shuaxin() {
      this.gettablelistapi()
      this.$message.success('列表刷新成功')
    }
  },
};
</script>

<style lang="scss" scoped>
.dengji{
  padding-left: 10px;
}
.bluecolor{
  color: #3792ff;
}
.bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
  }
  .bodybox{
    height: calc(100% - 90px);
    margin-top: 10px;
    background-color: #fff;
    padding: 20px;
    .table{
      margin-top: 15px;
      height: 90%;
    }
    .dialog{
      .bianyaqi{
        border: 1px solid #ccc;
        padding: 20px;
        display: flex;
        font-size: 14px;
        color: #101010;
        .liftbox{
          width: 30%;
          border-right: 1px solid #ccc;
          padding-right: 20px;
          .top{
            border-bottom: 1px solid #ccc;
            display: flex;
            padding-bottom: 20px;
            .image{
              margin-right: 15px;
              .name{
                text-align: center;
              }
            }
            .text{
              div{
                margin-top: 13px;
              }
              .xing{
                padding-left: 18px;
              }
            }
          }
          .buttom{
            padding-top: 20px;
            padding-bottom: 20px;
            .xinxi{
              margin-bottom: 20px;
            }
            .disdlay{

              .baojin{
              display: flex;
              margin-bottom: 10px;
              

              .xinlittle{
                width: 25%;
                div{
                  margin-bottom: 10px;
                }
              }
              .xinlittles{
                width: 50%;
                div{
                  margin-bottom: 10px;
                }
              }
            }
              }
 
          }
        }
        .rightbox{
          flex: 1;
          padding-left: 15px;
          .fourb{
            display: flex;
            .little{
              display: flex;
              align-items: center;
              width: 25%;
              .text{
                margin-left: 10px;
                div{
                  margin-top: 10px;
                }
              }
            }
          }
          .threeb{
            margin-top: 20px;
            position: relative;
            .wendu{
              display: inline-block;
              width: 33%;
              text-align: center;
            }
            .marker {
              width: 33%;
              position: absolute;
              width: 2px;
              background-color: #ccc; /* 线条颜色 */
              z-index: 1;
            }
            #marker1 {
              top: 0px; /* 调整位置 */
              left: 150px; /* 调整位置 */
              height: 95px; /* 线条长度 */
              transform: rotate(120deg); /* 旋转线条 */
            }

            #marker2 {
              top: 20px; /* 调整位置 */
              left: 280px; /* 调整位置 */
              height: 60px; /* 线条长度 */
              transform: rotate(180deg); /* 旋转线条 */
            }

            #marker3 {
              top: 0px; /* 调整位置 */
              left: 435px; /* 调整位置 */
              height: 100px; /* 线条长度 */
              transform: rotate(240deg); /* 旋转线条 */
            }
          }
          .oneb{
            margin-top: 50px;
            text-align: center;
            img{
              width: 330px;
              height: 364px;
            }
          }
        }
      }
      button{
        width: 60px;
        height: 30px;
        border-radius: 3px;
      border: 1px solid #ccc;
      background-color: #fff;
      }
    }
  }
}
</style>